<template>
    <div>
        <h1>defineModel API</h1>
        <DefineModel v-model="groupName" :msg></DefineModel>
        <button @click="handleCopy">复制内容</button>
        <button @click="handlePaste">粘贴内容</button>
        <button @click="handleContent">获取粘贴内容</button>
    </div>
</template>

<script setup lang="js">
import DefineModel from './componet/DefineModel.vue';
import Car from './tools/Car'
import BigCar from './tools/BigCar'
import ChildPlugin from './tools/ChildPlugin'
import { useClipboard } from '@/hooks/useClipboard'

defineOptions({
    name: 'Test', // 页面名称
})

// 访问粘贴板
const { executeCopy, executePaste, clipboardContent } = useClipboard()
const handleCopy = () => {
    executeCopy({
        id: '1255',
        name: '里斯'
    })
}
const handlePaste = () => {
    executePaste()
}
const handleContent = () => {
    console.log('获取剪贴板内容：', clipboardContent.value)
}


const groupName = ref('')
const msg = ref('我是语法糖')

watchEffect(() => {
    // console.log(groupName.value, 66666);
})

// 测试tapable功能
const car = new Car()

// 添加 brake 钩子的异步监听器
car.hooks.acclerate.tap('LoggerPlugin', (newSpeed) => {
    // 内部处理逻辑并返回
    console.log(`Accelerating to ${newSpeed}`)
})

// 添加 brake 钩子的异步监听器
car.hooks.brake.tap('WarningLampPlugin', () => {
    console.log('breking...');
})

// 添加 calculateRoutes 钩子的异步监听器
car.hooks.calculateRoutes.tap('GoogleMapsPlugin', (source, target, routesList) => {
    routesList.push(`Route from '${source}' to '${target}' via Google Maps`);
    return routesList;
});

// 添加 calculateRoutes 钩子的异步监听器
car.hooks.calculateRoutes.tap('BingMapsPlugin', (source, target, routesList) => {
    routesList.push(`Route from '${source}' to '${target}' via Bing Maps`);
    return routesList;
});

// 添加 calculateMileage 钩子的异步监听器
car.hooks.calculateMileage.tapAsync('MileagePlugin1', (distance, fuelUsed, callback) => {
    setTimeout(() => {
        const mileage = distance / fuelUsed;
        console.log(`MileagePlugin1: Calculated mileage as ${mileage} km/l`);
        callback();
    }, 1000);
});

// 添加 calculateMileage 钩子的异步监听器
car.hooks.calculateMileage.tapAsync('MileagePlugin2', (distance, fuelUsed, callback) => {
    setTimeout(() => {
        const mileage = (distance / fuelUsed) * 1.1; // Another mileage calculation with different logic
        console.log(`MileagePlugin2: Calculated mileage as ${mileage} km/l`);
        callback();
    }, 500);
});

// 添加 calculateCost 钩子的异步监听器
car.hooks.calculateCost.tapPromise('CostPlugin1', (distance) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const cost = distance * 1.8
            console.log(`行程1:${distance} 公里，总结:${cost}元`);
            resolve(cost)
        }, 1000);
    }).then(cost => {
        return cost;
    })
})

car.hooks.calculateCost.tapPromise('CostPlugin2', (distance, callback) => {
    const cost = distance * 3
    console.log(`行程2:${distance} 公里，总结:${cost}元`);
    return Promise.resolve(cost)
})

// 调用钩子
// car.setSpeed(60); // 输出: Accelerating to 60
// car.stop(); // 输出: Braking...
// const routes = car.calculateRoutes('Home', 'Work'); 
// console.log(routes);

const distance = 500; // Example distance in kilometers
const fuelUsed = 25; // Example fuel used in liters

// car.calculateMileage(distance, fuelUsed, () => {
//     // 回调函数，表示该方法执行完成
//     console.log('All mileage calculations are done.');
// });

// 计算总费用
// car.calculateCost(100).then(res => {
//     console.log(res, 'Promise');
// })

// 直接调用已注册钩子
// car.hooks.calculateCost.callAsync(1000).then(res => {
//     console.log(res, 1111);
// })


// console.log(car, 'car');

// 测试BigCar类
const bigCar = new BigCar()
bigCar.use(ChildPlugin)
console.log(bigCar, 'bigCar');
// 直接调用已注册钩子，必须有callback回调函数，否则报错
const R = bigCar.hooks.calculateCost.callAsync(1000, (res) => {
    console.log(res, 111);
})

</script>